<template>
  <div class="liver-container" :style="liverstyle">
    <div :class="'liver-item ' + data.type">
      <div
        v-for="(item, i) in data.list.length > 0 ? data.list : list"
        class="liver-item-box"
        :style="'border-radius:' + data.radius.top / 2 + 'px ' + data.radius.top / 2 + 'px ' + data.radius.bottom / 2 + 'px ' + data.radius.bottom / 2 + 'px '"
      >
        <div class="">
          <vimage v-if="item.cover_img" mode="widthFix" lazy-load="" :src="item.cover_img" alt="" class="img_box"></vimage>
          <img v-else class="img_box" src="@/assets/images/goods_col2.png" />
          <div class="liver-status">
       <!--     <i v-if="item.status==101" class="el-sc-zhibozhong" style="color: #ff3c29;"></i>
            <i v-if="item.status==103" class="el-sc-huifang" ></i>
            <i v-if="item.status==102" class="el-sc-yugao" style="color: #09c15f;"></i>
            <i v-else class="el-sc-tishibeifen"></i> -->
            <div class="liver-status-box">{{ item | getstatus }}</div>
          </div>
        </div>
        <div class="liver-info">
          <div class="liver-info-box">
            <div class="liver-info-title line1">{{ item.title }}</div>
            <div class="liver-info-user u-flex">
              <img src="@/assets/images/nologin.jpg" />
              <span>{{ item.anchor_name }}</span>
            </div>
          </div>
          <div class="liver-com_box">
            <template v-for="(goods, i) in item.liveGoods">
              <vimage v-if="goods.master" :src="goods.master"></vimage>
              <img v-else src="@/assets/images/btns3.png" />
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          start_time: '2022-05-27 13:00:00',
          title: '直播间标题',
          anchor_name: '蜡笔小新',
          liveGoods: [{}, {}, {}],
          status: 102
        }
      ]
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  filters: {
    getstatus(item) {
      switch (item.status) {
        case 101:
          return '直播中';
          break;
        case 102:
          return '预告 ' + item.start_time.substring(5, 16);
          break;
        case 103:
          return '已结束';
          break;
        case 104:
          return '禁播';
          break;
        case 105:
          return '暂停';
          break;
        case 106:
          return '异常';
          break;
        case 107:
          return '已过期';
          break;
      }
    }
  },
  computed: {
    liverstyle() {
      return 'padding: ' + this.data.margin.top / 2 + 'px ' + this.data.margin.lr / 2 + 'px ' + this.data.margin.bottom / 2 + 'px';
    }
  }
};
</script>

<style type="text/css" lang="scss" scoped>
.line1 {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;
}
.liver-container {
  .liver-item {
    .liver-item-box {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .img_box {
      height: 150px;
      width: 100%;
    }
    .liver-status {
      display: flex;
      position: absolute;
      top: 8px;
      left: 20px;
      height: 20px;
      i {
        font-size: 20px;
        position: absolute;
        left: -10px;
        top:-2px;
      }

      .liver-status-box {
        border-radius:12px;
        padding: 0 12px 0 15px;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        background: rgba(0, 0, 0, 0.3);
      }
    }
    .liver-info {
      width: 100%;
      background: #fff;
      padding: 5px;
      display: flex;
      align-items: center;
      .liver-info-box {
        width: 60%;
        .liver-info-title {
          font-size: 14px;
          line-height: 20px;
        }
        .liver-info-user {
          font-size: 12px;
          line-height: 17px;
          margin-top: 5px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
      }
      .liver-com_box {
        // flex: 1;
        img {
          width: 40px;
          height: 40px;
          margin-left: 5px;
        }
      }
    }
  }
  .item_two {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .img_box {
      height: 170px;
      width: 170px;
    }
    .liver-info {
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      .liver-com_box {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
    }
    .liver-item-box {
      width: 170px;
      margin-bottom: 10px;
    }
  }
  .item_three {
    .img_box {
      height: 150px;
      width: 150px;
    }
    .liver-info {
      height: 150px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
    }
    .liver-com_box {
      // height: 40px;
    }
    .liver-item-box {
      display: flex;
    }
  }
}
</style>
